<template>
	<view class="myquestion-page">
		<view class="myquestion-page-header">
			<mynavBar :title="title" :backgrouncolor="backgrouncolor" :gps="gps" :bgcolor="bgColor"></mynavBar>
		</view>
		<view class="myquestion-page-content">
			<view class="page-content-header">
				<view class="content-header-title" @click="headerindexone(0)"
					:class="headerone==0?'content-header-titleactive':''">
					<span>免费提问</span>
				</view>
				<view class="content-header-title" @click="headerindexone(1)"
					:class="headerone==1?'content-header-titleactive':''">
					<span>悬赏提问</span>
				</view>
			</view>

			<!-- 免费提问内容板块-->
			<view class="freequestion-content" v-if="headerone==0">
				<!-- 头部选项卡部分 -->
				<view class="freequestion-content-header">
					<view class="content-header-title" @click="headerindextwo(0)"
						:class="headertwo==0?'content-header-titleactives':''">
						<span class="header-title-text">已有回答</span>
					</view>
					<view class="content-header-title" @click="headerindextwo(1)"
						:class="headertwo==1?'content-header-titleactives':''">
						<span class="header-title-text">暂无回答</span>
					</view>
				</view>
				<!-- 已有回答的内容 -->
				<view class="freequestion-content-body">
					<view class="content-body-list" v-for="(item,index) in nextcon" :key="item.id"
						@click="goquestiindetals(item.id)">
						<img :src="queryIconImage(`myquestionlogo1`)" alt="" class="body-list-img"
							v-if="item.answer_type=='公开参与'">
						<img :src="queryIconImage(`myquestionlogo2`)" alt="" class="body-list-img"
							v-if="item.answer_type=='答主参与'">
						<view class="content-body-tetx">
							<view class="body-tetx-left">
								<p class="tetx-left-title">{{item.title}}</p>
								<span>{{item.created_at}}</span>
							</view>
							<view class="body-tetx-right" v-if="item.article_comment.length>0">
								<span>已有{{item.article_comment.length}}个回答</span>
							</view>
							<view class="body-tetx-right" v-if="item.article_comment.length<1">
								<span>暂无回答</span>
							</view>
						</view>

					</view>
				</view>
				<!-- 暂无回答的内容 -->
			</view>


			<!-- 悬赏提问内容板块 -->
			<view class="offerquestion-content" v-if="headerone==1">
				<!-- 头部选项卡部分 -->
				<view class="offerquestion-content-header">
					<view class="content-header-title" @click="headerindexthree(0)"
						:class="headerthree==0?'content-header-titleactives':''">
						<span class="header-title-text">已有回答</span>
					</view>
					<view class="content-header-title" @click="headerindexthree(1)"
						:class="headerthree==1?'content-header-titleactives':''">
						<span class="header-title-text">暂无回答</span>
					</view>
				</view>
				<!-- 回答内容模块 -->
				<view class="offerquestion-content-body">
					<view class="content-body-list" v-for="(item,index) in offernextcon" :key="item.id"
						@click="goquestiindetals(item.id)">
						<img :src="queryIconImage(`myquestionlogo1`)" alt="" class="body-list-img"
							v-if="item.answer_type=='公开参与'">
						<img :src="queryIconImage(`myquestionlogo2`)" alt="" class="body-list-img"
							v-if="item.answer_type=='答主参与'">
						<view class="content-body-tetx">
							<view class="body-tetx-left">
								<p class="tetx-left-title">{{item.title}}</p>
								<span v-if="item.article_comment.length>0">已有{{item.article_comment.length}}个回答</span>
								<span v-if="item.article_comment.length<=0">暂无回答</span>
							</view>
							<view class="body-tetx-right"
								:style="item.offerbleam&&!item.offertime?'justify-content: flex-end;':''">
								<span v-if="item.answerStatus=='悬赏结束'"
									:style="item.answerStatus=='悬赏结束'?'color:red;':''">悬赏已失效</span>
								<span v-if="item.answerStatus=='悬赏中'">悬赏倒计时剩余<span
										style="color: #F09500; font-size: 33rpx;">{{item.endTime}}</span>天</span>
								<span></span>

								<span :style="item.answerStatus=='悬赏结束'?'color:red;':'color:#F09500'"
									v-if="item.answerStatus!='悬赏完成'">悬赏{{item.price_cny/100}}元</span>
								<span v-else style="color:#F09500">
									悬赏{{item.price_cny/100}}元&nbsp;赏金已分配
								</span>
							</view>
						</view>

					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		Time
	} from "@/utils/timenew.js"
	export default {
		data() {
			return {
				bgColor: 'rgba(165, 42, 42, 0)',
				gps: '',
				nextcon: [],
				offernextcon: [],
				nextcontent: [],
				nextcontenttwo: [],
				offernextcontent: [],
				offernextcontenttwo: [],
				title: '我的提问',
				backgrouncolor: '#F4F4F4',
				headerone: 0,
				headertwo: 0,
				headerthree: 0
			};
		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 50) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 50 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.9)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			//#endif
			console.log("胶囊位置信息", arr);
			// if (this.headertwo == 0) {
			// 	this.nextcon = this.nextcontent
			// } else {
			// 	this.nextcon = this.nextcontenttwo
			// }
			// if (this.headerthree == 0) {
			// 	this.offernextcon = this.offernextcontent
			// } else {
			// 	this.offernextcon = this.offernextcontenttwo
			// }
			this.getData()
		},
		computed: {
			...mapState({
				iconList: state => state.remote?.iconList?.data_list ?? [],
				homelog: state => state.remote?.homelog?.data_list ?? [],
			})
		},
		methods: {
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			goquestiindetals(id) {
				uni.navigateTo({
					url: `/pages_a/questiondetails/questiondetails?id=${id}`
				})
			},
			headerindexthree(val) {
				this.headerthree = val
				this.getData()

			},
			getData() {
				if (this.headerone == 0) {
					this.$store.dispatch("remote/query", {
						model: "article",
						isloading: false,
						where: {
							_and: [{
									user_user: {
										_eq: uni.getStorageSync('userInfo').id
									}
								},
								{
									type: {
										_eq: '普通提问'
									}
								}
							]
						},
						order_by: {
							created_at: "desc"
						},
						field_string: 'id title content created_at status price_cny answer_type user_user article_comment{id article_article} user{id nickname avatar{url}} '
					}).then(res => {
						console.log('获取当前用户发的问题', res);
						let abb = []
						let add = []
						abb = res.data_list.map(v => {
							v.created_at = Time(v.created_at)
							return v
						})
						add = JSON.parse(JSON.stringify(abb))
						if (this.headertwo == 0) {
							this.nextcon = add.filter(v => v.article_comment.length > 0)
						} else {
							this.nextcon = add.filter(v => v.article_comment.length < 1)
						}

					})

				} else {
					this.$store.dispatch("remote/query", {
						model: "article",
						isloading: false,
						where: {
							_and: [{
									user_user: {
										_eq: uni.getStorageSync('userInfo').id
									}
								},
								{
									type: {
										_eq: '悬赏提问'
									}
								}
							]
						},
						order_by: {
							created_at: "desc"
						},
						field_string: 'id title content created_at status price_cny answer_type user_user article_comment{id article_article} user{id nickname avatar{url}} article_answer{id user_user created_at status}'
					}).then(res => {

						let abb = [],

							now_time = new Date().getTime(),
							oneDay = (3600 * 1000) * 24;
						let add = []
						abb = res.data_list.map(v => {
							v.created_at = Date.parse(v.created_at)
							v.article_answer.created_at = Date.parse(v.article_answer.created_at)
							return v
						})
						add = JSON.parse(JSON.stringify(abb))
						for (let i in add) {
							let is_end = true
							for (let j in add[i].article_answer) {
								if (add[i].article_answer[j].status == '待回答' || add[i].article_answer[j]
									.status ==
									'已结束') {
									is_end = false
								}
							}
							if (add[i].created_at + oneDay * 7 < now_time) {
								if (is_end == false) {
									add[i].answerStatus = "悬赏结束"
									add[i].endTime = 0
								} else {
									add[i].answerStatus = "悬赏完成"
									add[i].endTime = 0
								}
							} else {
								if (is_end == false) {
									add[i].answerStatus = "悬赏中"
									add[i].endTime = parseInt((add[i].created_at + oneDay * 7 - now_time) /
										oneDay) + 1
								} else {
									add[i].answerStatus = "悬赏完成"
									add[i].endTime = parseInt((add[i].created_at + oneDay * 7 - now_time) /
										oneDay) + 1
								}
							}

						}
						console.log('获取当前用户发的问题', add);
						if (this.headerthree == 0) {
							this.offernextcon = add.filter(v => v.article_comment.length > 0)
						} else {
							this.offernextcon = add.filter(v => v.article_comment.length < 1)
						}

					})
				}


			},
			/* 头部选择框事件 */
			headerindexone(val) {
				this.headerone = val
				this.getData()
			},
			headerindextwo(val) {
				this.headertwo = val
				this.getData()
			}
		}
	}
</script>

<style lang="scss">
	.myquestion-page {
		width: 100%;
		height: 100vh;
		background-color: #f4f4f4;

		.myquestion-page-header {
			width: 100%;
			height: 343rpx;
		}

		.myquestion-page-content {
			width: 100%;
			height: 100%;
			margin-top: -170rpx;

			.page-content-header {
				display: flex;
				justify-content: center;
				margin-bottom: 50rpx;

				.content-header-title {
					margin: 0 12rpx;
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #3D3D3D;
					line-height: 42rpx;
				}

				.content-header-titleactive {
					color: #FDB727;
					position: relative;

				}

				.content-header-titleactive::after {
					content: '';
					width: 30%;
					height: 10rpx;
					background-color: #FDB727;
					display: block;
					border-radius: 5rpx;
					position: absolute;
					bottom: -15rpx;
					left: 50%;
					transform: translateX(-50%);


				}
			}

			/* 免费提问样式  */
			.freequestion-content {
				display: flex;
				height: 100%;
				flex-direction: column;

				.freequestion-content-header {
					width: 750rpx;
					height: 80rpx;
					background: #EEEEEE;
					border-radius: 30rpx 30rpx 0rpx 0rpx;
					overflow: hidden;
					display: flex;
					box-shadow: 0px -10rpx 10rpx 0px rgba(0, 0, 0, 0.1);

					.content-header-title {
						width: 50%;
						height: 80rpx;
						text-align: center;

						.header-title-text {
							font-size: 30rpx;
							font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
							font-weight: 400;
							color: #666666;
							line-height: 80rpx;
						}
					}

					.content-header-titleactives {
						background: #F09500;

						.header-title-text {
							color: #fff;
							border-bottom: 4rpx solid #fff;
						}
					}
				}

				.freequestion-content-body {
					flex: 1;
					background-color: #fff;
					overflow: hidden;
					overflow-y: auto;
					width: 100%;
					box-sizing: border-box;
					padding: 0 25rpx 0 30rpx;

					.content-body-list {
						width: 100%;
						height: 130rpx;
						box-sizing: border-box;
						border-bottom: 2rpx dashed #ccc;
						padding: 30rpx 10rpx 10rpx 10rpx;
						display: flex;
						align-items: center;

						.body-list-img {
							width: 39rpx;
							margin-right: 8rpx;
							height: 36rpx;
						}

						.content-body-tetx {
							flex: 1;
							align-items: flex-start;
							display: flex;
							justify-content: space-between;

							.body-tetx-left {
								width: 76%;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 45rpx;


								.tetx-left-title {
									font-size: 30rpx;
									font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
									font-weight: 500;
									color: #5F5F5F;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									line-height: 42rpx;
								}
							}

							.body-tetx-right {
								text-align: right;
								flex: 1;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 45rpx;
							}
						}
					}
				}
			}

			/* 悬赏提问样式 */
			.offerquestion-content {
				display: flex;
				height: 100%;
				flex-direction: column;

				.offerquestion-content-header {
					width: 750rpx;
					height: 80rpx;
					background: #EEEEEE;
					border-radius: 30rpx 30rpx 0rpx 0rpx;
					overflow: hidden;
					display: flex;
					box-shadow: 0px -10rpx 10rpx 0px rgba(0, 0, 0, 0.1);

					.content-header-title {
						width: 50%;
						height: 80rpx;
						text-align: center;

						.header-title-text {
							font-size: 30rpx;
							font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
							font-weight: 400;
							color: #666666;
							line-height: 80rpx;
						}
					}

					.content-header-titleactives {
						background: #F09500;

						.header-title-text {
							color: #fff;
							border-bottom: 4rpx solid #fff;
						}
					}
				}

				.offerquestion-content-body {
					flex: 1;
					background-color: #fff;
					width: 100%;
					overflow: hidden;
					overflow-y: auto;
					box-sizing: border-box;
					padding: 0 25rpx 0 30rpx;

					.content-body-list {
						width: 100%;
						height: 130rpx;
						box-sizing: border-box;
						border-bottom: 2rpx dashed #ccc;
						padding: 30rpx 10rpx 10rpx 10rpx;
						display: flex;
						align-items: center;

						.body-list-img {
							width: 39rpx;
							margin-right: 10rpx;
							height: 36rpx;
						}

						.content-body-tetx {
							flex: 1;
							align-items: flex-start;
							display: flex;
							justify-content: space-around;
							flex-direction: column;

							.body-tetx-left {
								width: 100%;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 45rpx;
								display: flex;
								justify-content: space-between;


								.tetx-left-title {
									width: 75%;
									font-size: 30rpx;
									font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
									font-weight: 500;
									color: #5F5F5F;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									line-height: 42rpx;
								}
							}

							.body-tetx-right {
								width: 100%;
								text-align: right;
								display: flex;
								justify-content: space-between;
								flex: 1;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 45rpx;
							}
						}
					}
				}
			}
		}
	}
</style>